<template>
  <view>
    <view class="person-head">
      <cmd-avatar src="https://avatar.bbs.miui.com/images/noavatar_small.gif" size="lg" :make="{'background-color': '#fff'}" @click="fnInfoWin" />
      <view class="person-head-box">
        <view class="person-head-nickname">{{ nickname }}</view>
        <view class="person-head-username">ID：{{ userId }}</view>
      </view>
    </view>
    <view class="person-list">
      <cmd-cell-item title="我的课程" slot-left arrow @click="course">
        <cmd-icon type="bullet-list" size="24" color="#368dff" />
      </cmd-cell-item>
      <!-- <cmd-cell-item title="消息通知" slot-left arrow>
        <cmd-icon type="message" size="24" color="#368dff" />
      </cmd-cell-item>
      <cmd-cell-item title="学员签到" slot-left arrow @click="tel()">
        <cmd-icon type="camera" size="24" color="#368dff" />
      </cmd-cell-item> -->
      <cmd-cell-item title="退出登录" slot-left arrow @click="logout()">
        <cmd-icon type="share" size="24" color="#368dff" />
      </cmd-cell-item>
    </view>
  </view>
</template>

<script>
  import cmdAvatar from '@/components/cmd-avatar/cmd-avatar.vue'
  import cmdIcon from '@/components/cmd-icon/cmd-icon.vue'
  import cmdCellItem from '@/components/cmd-cell-item/cmd-cell-item.vue'

  export default {
    components: {
      cmdAvatar,
      cmdCellItem,
      cmdIcon
    },
    data() {
      return {
        userId: uni.getStorageSync('userId'),
        nickname: uni.getStorageSync('nickname')
	    }
    },
    created() {

    },
    methods: {
      /**
       * 打开用户信息页
       */
      fnInfoWin() {
        uni.navigateTo({
          url: '/pages/user/info/info'
        })
      },
      tel() {
        // #ifdef  MP-WEIXIN
        uni.scanCode({
          success: function(res) {
            console.log(JSON.stringify(res))
          }
        })
        // #endif
        // #ifdef H5
        console.warn('此接口为微信接口，H5网页无法调用！')
        // #endif
      },
      logout() {
        uni.redirectTo({
          url: '/pages/signup/login'
        })
      },
	  course() {
		  uni.navigateTo({
			  url: '/pages/signup/myCourse'
			})
		}
    }
  }
</script>

<style>
  .person-head {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 150px;
    padding-left: 20px;
    background: linear-gradient(to right, #365fff, #36bbff);
  }

  .person-head-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    margin-left: 10px;
  }

  .person-head-nickname {
    font-size: 18px;
    font-weight: 500;
    color: #fff;
  }

  .person-head-username {
    font-size: 14px;
    font-weight: 500;
    color: #fff;
  }

  .person-list {
    line-height: 0;
  }
</style>
